<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
  <meta name="description" content="tong.li&#39;s blog">
  <meta name="keyword" content="彤哥哥博客，95后技术爱好者,现就职于同程旅行/同程艺龙上海分公司，专注于互联网技术分享的平台。">
  
    <link rel="shortcut icon" href="/css/images/icon.png">
  
  <title>
    
      Vue新手入门指南 | 彤哥哥的博客
    
  </title>
  <link href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">
  <link href="https://cdn.staticfile.org/highlight.js/9.12.0/styles/tomorrow-night.min.css" rel="stylesheet">
  
<link rel="stylesheet" href="/css/style.css">

  
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/geopattern/1.2.3/js/geopattern.min.js"></script>
  <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
  
    
<script src="/js/qrious.js"></script>

  
  
  
  
    <!-- MathJax support START -->
    <script type="text/x-mathjax-config">
      MathJax.Hub.Config({
        tex2jax: {
          inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
          processEscapes: true,
          skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
        }
      });
    </script>

    <script type="text/x-mathjax-config">
      MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax(), i;
        for (i=0; i < all.length; i += 1) {
          all[i].SourceElement().parentNode.className += ' has-jax';
        }
      });
    </script>
    <script type="text/javascript" src="https://cdn.staticfile.org/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
    <!-- MathJax support END -->
  


  
  
    
<script src="/js/local-search.js"></script>


<meta name="generator" content="Hexo 5.4.2"></head>
<div class="wechat-share">
  <img src="/css/images/logo.png" />
</div>
  <body>
    <header class="header fixed-header">
  <div class="header-container">
    <a class="home-link" href="/">
      <div class="logo"></div>
      <span>彤哥哥的博客</span>
    </a>
    <ul class="right-list">
      
        <li class="list-item">
          
            <a href="/" class="item-link">主页</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/series/" class="item-link">分类</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/tags/" class="item-link">标签</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/archives/" class="item-link">归档</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/project/" class="item-link">项目</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/about/" class="item-link">关于</a>
          
        </li>
      
      
        <li class="menu-item menu-item-search right-list">
    <a role="button" class="popup-trigger">
        <i class="fa fa-search fa-fw"></i>
    </a>
</li>
      
    </ul>
    <div class="menu">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </div>
    <div class="menu-mask">
      <ul class="menu-list">
        
          <li class="menu-item">
            
              <a href="/" class="menu-link">主页</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/series/" class="menu-link">分类</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/tags/" class="menu-link">标签</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/archives/" class="menu-link">归档</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/project/" class="menu-link">项目</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/about/" class="menu-link">关于</a>
            
          </li>
        
      </ul>
    </div>
    
      <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
            <span class="search-icon">
                <i class="fa fa-search"></i>
            </span>
            <div class="search-input-container">
                <input autocomplete="off" autocapitalize="off"
                    placeholder="Please enter your keyword(s) to search." spellcheck="false"
                    type="search" class="search-input">
            </div>
            <span class="popup-btn-close">
                <i class="fa fa-times-circle"></i>
            </span>
        </div>
        <div id="search-result">
            <div id="no-result">
                <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
            </div>
        </div>
    </div>
</div>
    
  </div>
</header>

    <div id="article-banner">
  <h2>Vue新手入门指南</h2>
  <p class="post-date">2020-02-02</p>
  <div class="arrow-down">
    <a href="javascript:;"></a>
  </div>
</div>
<main class="app-body flex-box">
  <!-- Article START -->
  <article class="post-article">
    <section class="markdown-content"><h1 id="1-为什么要学习流行框架"><a href="#1-为什么要学习流行框架" class="headerlink" title="1. 为什么要学习流行框架"></a>1. 为什么要学习流行框架</h1><ul>
<li><p>企业使用框架是为了提高开发效率：在企业中，时间就是效率，效率就是金钱；提高开发效率的发展历程：原生JS -&gt; JQuery之类的类库 -&gt; 前后端模板引擎(ejs/JSP/Freemaker/Thymeleaf/Velocity) -&gt; Angular.js / Vue.js/Rect.js（能够帮助我们减少不必要的DOM操作；提高渲染效率；双向数据绑定的概念【通过框架提供的指令，前端程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了】）</p>
</li>
<li><p>简化开发：在Vue中，一个核心的概念，就是让用户不再操作DOM元素，解放了用户的双手，让程序员可以更多的时间去关注业务逻辑；</p>
</li>
<li><p>增强自己就业时候的竞争力，人无我有，人有我优，我们平时不忙的时候，闲着都在干嘛？玩手机、睡懒觉、追剧？一个60岁的老人都能做的事情，那我们20多岁的人还可以干点什么呢？</p>
<h1 id="2-框架和库的区别"><a href="#2-框架和库的区别" class="headerlink" title="2. 框架和库的区别"></a>2. 框架和库的区别</h1></li>
<li><p>框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。</p>
</li>
</ul>
<ul>
<li>node 中的 express；Java中的Spring Boot，Python中的django，都是完整的Web解决方案。</li>
</ul>
<ul>
<li>库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。<ol>
<li>从Jquery 切换到 Zepto</li>
<li>从 EJS 切换到 art-template,EJS没有自定义过滤器.</li>
</ol>
</li>
</ul>
<h1 id="3-开发模式的演变"><a href="#3-开发模式的演变" class="headerlink" title="3. 开发模式的演变"></a>3. 开发模式的演变</h1><ul>
<li><p>MVC（Model-View-Controller）是最常见的软件架构之一，业界有着广泛应用。JAVAEE、.NET三层架构都是基于MVC模式设计出来的</p>
<p>  <img src="https://ltyeamin.github.io/imgs/2020/07/20200731163435.png" alt="MVC流程图"><br>   <img src="https://ltyeamin.github.io/imgs/2020/07/20200731163445.png" alt="Spring WebMvc执行流程图"></p>
</li>
<li><p>MVP 模式将 Controller 改名为 Presenter，同时将单向通信改为双向通信。Android开发领域常见模式;</p>
<p> <img src="https://ltyeamin.github.io/imgs/2020/07/20200731163452.png" alt="MVP"></p>
</li>
<li><p>MVVM是前端视图层的概念，主要关注于 视图层分离，也就是说：MVVM把前端的视图层，分为了 三部分 Model, View , VM ViewModel.</p>
<p><img src="https://ltyeamin.github.io/imgs/2020/07/20200731163457.png" alt="MVVM模式图">   </p>
<p><img src="https://ltyeamin.github.io/imgs/2020/07/20200731165228.png" alt="MVVM NodeJS开发模式"></p>
</li>
</ul>
<h1 id="4-流行框架对比"><a href="#4-流行框架对比" class="headerlink" title="4. 流行框架对比"></a>4. 流行框架对比</h1><h2 id="4-1-Angular"><a href="#4-1-Angular" class="headerlink" title="4.1 Angular"></a>4.1 Angular</h2><p>由Google公司开发维护,前几年很流行,现在不流行,主要是框架太重,学习曲线高.</p>
<h2 id="4-2-React"><a href="#4-2-React" class="headerlink" title="4.2 React"></a>4.2 React</h2><p>FaceBook开源软件，拥有虚拟DOM\提供响应式和组件化的视图组件.运行性能较高.国内互联网巨头(阿里、美团)公司较为常用，可以通过<em>React</em> <em>Native</em>使你只使用JavaScript也能编写原生移动应用。</p>
<h2 id="4-3-Vue"><a href="#4-3-Vue" class="headerlink" title="4.3 Vue"></a>4.3 Vue</h2><p>华人尤雨溪个人开发，吸取了Angular和React的优点，大大缩小了库的体积，提升了运行时性能。同样，也使用了虚拟DOM和数据双向绑定，学习曲线很低，目前来看流行度特别高。</p>
<h1 id="5-Vue-js基础学习"><a href="#5-Vue-js基础学习" class="headerlink" title="5. Vue.js基础学习"></a>5. Vue.js基础学习</h1><h2 id="5-1-Vue-js是什么"><a href="#5-1-Vue-js是什么" class="headerlink" title="5.1 Vue.js是什么"></a>5.1 Vue.js是什么</h2><ul>
<li>Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex）</li>
<li>Vue.js 是前端的<strong>主流框架之一</strong>，和Angular.js、React.js 一起，并成为前端三大主流框架！</li>
<li>Vue.js 是一套构建用户界面的框架，<strong>只关注视图层</strong>，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）</li>
<li>前端的主要工作？主要负责MVC中的V这一层；主要工作就是和界面打交道，来制作前端页面效果；</li>
</ul>
<h2 id="5-2-插值表达式和v-cloak"><a href="#5-2-插值表达式和v-cloak" class="headerlink" title="5.2 插值表达式和v-cloak"></a>5.2 插值表达式和v-cloak</h2><h3 id="5-2-1-插值表达式"><a href="#5-2-1-插值表达式" class="headerlink" title="5.2.1 插值表达式"></a>5.2.1 插值表达式</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span>=<span class="string">&quot;ie=edge&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 1. 导入Vue的包 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 将来 new 的Vue实例，会控制这个 元素中的所有内容 --&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- Vue 实例所控制的这个元素区域，就是我们的 V  --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123; msg &#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 2. 创建一个Vue的实例</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 当我们导入包之后，在浏览器的内存中，就多了一个 Vue 构造函数</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//  注意：我们 new 出来的这个 vm 对象，就是我们 MVVM中的 VM调度者</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,  <span class="comment">// 表示，当前我们 new 的这个 Vue 实例，要控制页面上的哪个区域</span></span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 这里的 data 就是 MVVM中的 M，专门用来保存 每个页面的数据的</span></span></span><br><span class="line"><span class="language-javascript">      <span class="attr">data</span>: &#123; <span class="comment">// data 属性中，存放的是 el 中要用到的数据</span></span></span><br><span class="line"><span class="language-javascript">        <span class="attr">msg</span>: <span class="string">&#x27;大家好，我是李彤&#x27;</span> <span class="comment">// 通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】</span></span></span><br><span class="line"><span class="language-javascript">      &#125;</span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="5-2-2-v-cloak和v-text指令"><a href="#5-2-2-v-cloak和v-text指令" class="headerlink" title="5.2.2  v-cloak和v-text指令"></a>5.2.2  v-cloak和v-text指令</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span>=<span class="string">&quot;ie=edge&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 使用 v-cloak 能够解决 插值表达式闪烁的问题 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">v-cloak</span>&gt;</span>++++++++ &#123;&#123; msg &#125;&#125; ----------<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h4</span> <span class="attr">v-text</span>=<span class="string">&quot;msg&quot;</span>&gt;</span>==================<span class="tag">&lt;/<span class="name">h4</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 默认 v-text 是没有闪烁问题的 --&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- v-text会覆盖元素中原本的内容，但是 插值表达式  只会替换自己的这个占位符，不会把 整个元素的内容清空 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span>&#123;&#123;msg2&#125;&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">v-text</span>=<span class="string">&quot;msg2&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">msg</span>: <span class="string">&#x27;123&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">msg2</span>: <span class="string">&#x27;&lt;h1&gt;我是李彤，前后端通吃的程序员&lt;/h1&gt;&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">      &#125;</span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>



<h2 id="5-3-Vue指令之v-html"><a href="#5-3-Vue指令之v-html" class="headerlink" title="5.3 Vue指令之v-html"></a>5.3 Vue指令之v-html</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span>=<span class="string">&quot;ie=edge&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">v-text</span>=<span class="string">&quot;msg2&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">v-html</span>=<span class="string">&quot;msg2&quot;</span>&gt;</span>1212112<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">msg2</span>: <span class="string">&#x27;&lt;h1&gt;我是李彤，前后端通吃的程序员&lt;/h1&gt;&#x27;</span></span></span><br><span class="line"><span class="language-javascript">      &#125;</span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>



<h2 id="5-4-Vue指令之v-bind和v-on"><a href="#5-4-Vue指令之v-bind和v-on" class="headerlink" title="5.4 Vue指令之v-bind和v-on"></a>5.4 Vue指令之v-bind和v-on</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span>=<span class="string">&quot;ie=edge&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- v-bind: 是 Vue中，提供的用于绑定属性的指令 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> <span class="attr">value</span>=<span class="string">&quot;按钮1&quot;</span> <span class="attr">v-bind:title</span>=<span class="string">&quot;mytitle + &#x27;123&#x27;&quot;</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- v-bind   Vue提供的属性绑定机制   缩写是 :要绑定的属性 --&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- v-on     Vue提供的事件绑定机制   缩写是 @要绑定的事件 --&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- v-bind 中，可以写合法的JS表达式 --&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- Vue 中提供了 v-on: 事件绑定机制 , v-on:click和@click不能直接写js表达式--&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> <span class="attr">value</span>=<span class="string">&quot;按钮2&quot;</span> <span class="attr">:title</span>=<span class="string">&quot;mytitle + &#x27;123&#x27;&quot;</span> <span class="attr">v-on:click</span>=<span class="string">&quot;show()&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> <span class="attr">value</span>=<span class="string">&quot;按钮3&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;show&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">mytitle</span>: <span class="string">&#x27;Vue学习&#x27;</span></span></span><br><span class="line"><span class="language-javascript">      &#125;,</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">methods</span>: &#123; <span class="comment">// 这个 methods属性中定义了当前Vue实例所有可用的方法</span></span></span><br><span class="line"><span class="language-javascript">        <span class="attr">show</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">          <span class="title function_">alert</span>(<span class="string">&#x27;Hello&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript">      &#125;</span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">/* </span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">      // 原生JS事件点击操作</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">      document.getElementById(&#x27;btn&#x27;).onclick = function()&#123;</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">        alert(&#x27;Hello&#x27;)</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">       &#125; </span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">    */</span></span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="5-5-Vue指令之v-pre和v-once"><a href="#5-5-Vue指令之v-pre和v-once" class="headerlink" title="5.5 Vue指令之v-pre和v-once"></a>5.5 Vue指令之v-pre和v-once</h2><h3 id="5-5-1-v-pre指令"><a href="#5-5-1-v-pre指令" class="headerlink" title="5.5.1 v-pre指令"></a>5.5.1 v-pre指令</h3><ul>
<li>显示原始信息跳过编译过程</li>
<li>跳过这个元素和它的子元素的编译过程。</li>
<li><strong>一些静态的内容不需要编译加这个指令可以加快渲染</strong></li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">span</span> <span class="attr">v-pre</span>&gt;</span>&#123;&#123; this will not be compiled &#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span>    </span><br><span class="line"><span class="comment">&lt;!--  显示的是&#123;&#123; this will not be compiled &#125;&#125;  --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">span</span> <span class="attr">v-pre</span>&gt;</span>&#123;&#123;msg&#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span>  </span><br><span class="line"><span class="comment">&lt;!--   即使data里面定义了msg这里仍然是显示的&#123;&#123;msg&#125;&#125;--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">msg</span>: <span class="string">&#x27;Hello Vue.js&#x27;</span></span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript">    &#125;);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="5-5-3-v-once指令"><a href="#5-5-3-v-once指令" class="headerlink" title="5.5.3 v-once指令"></a>5.5.3 v-once指令</h3><p>执行一次性的插值【当数据改变时，插值处的内容不会继续更新】</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 即使data里面定义了msg 后期我们修改了 仍然显示的是第一次data里面存储的数据即 Hello Vue.js  --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">span</span> <span class="attr">v-once</span>&gt;</span>&#123;&#123; msg&#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span>    </span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">msg</span>: <span class="string">&#x27;Hello Vue.js&#x27;</span></span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript">    &#125;);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>



<h2 id="5-6-跑马灯效果练习"><a href="#5-6-跑马灯效果练习" class="headerlink" title="5.6 跑马灯效果练习"></a>5.6 跑马灯效果练习</h2><ol>
<li>HTML结构：</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 1. 创建一个要控制的区域 --&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">   <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> <span class="attr">value</span>=<span class="string">&quot;浪起来&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;lang&quot;</span>&gt;</span></span><br><span class="line">   <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> <span class="attr">value</span>=<span class="string">&quot;低调&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;stop&quot;</span>&gt;</span></span><br><span class="line">   <span class="tag">&lt;<span class="name">h4</span>&gt;</span>&#123;&#123; msg &#125;&#125;<span class="tag">&lt;/<span class="name">h4</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ol start="2">
<li>Vue实例：</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">	分析：</span></span><br><span class="line"><span class="comment">  	1. 给 【浪起来】 按钮，绑定一个点击事件   可写v-on，也可以写@事件名称</span></span><br><span class="line"><span class="comment">  	2. 在按钮的事件处理函数中，写相关的业务逻辑代码：拿到 msg 字符串，然后 调用 字符串的 substring 来进行			字符串的截取操作，把 第一个字符截取出来，放到最后一个位置即可；</span></span><br><span class="line"><span class="comment">  	3. 为了实现点击下按钮，自动截取的功能，需要把 2 步骤中的代码，放到一个定时器中去。</span></span><br><span class="line"><span class="comment">  注意：</span></span><br><span class="line"><span class="comment">  	在VM实例中，如果想要获取 data 上的数据，或者 想要调用 methods 中的 方法，必须通过 this.数据属性名  		或this.方法名 来进行访问，这里的this，就表示 我们 new 出来的  VM 实例对象</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line">  <span class="keyword">var</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span><br><span class="line">    <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span><br><span class="line">    <span class="attr">data</span>: &#123;</span><br><span class="line">      <span class="attr">msg</span>: <span class="string">&#x27;我是李彤，浪起来~~！&#x27;</span>,</span><br><span class="line">      <span class="attr">intervalId</span>: <span class="literal">null</span> <span class="comment">// 在data上定义 定时器Id</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">methods</span>: &#123;</span><br><span class="line">      <span class="title function_">lang</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="comment">// console.log(this.msg)</span></span><br><span class="line">        <span class="comment">// 获取到头的第一个字符</span></span><br><span class="line">        <span class="keyword">if</span> (<span class="variable language_">this</span>.<span class="property">intervalId</span>) <span class="keyword">return</span>;</span><br><span class="line"></span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">intervalId</span> = <span class="built_in">setInterval</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">          <span class="comment">// 获取到第一个字符串符和剩下的字符串后两者拼接，最终赋值到this.msg里</span></span><br><span class="line">         <span class="variable language_">this</span>.<span class="property">msg</span>= <span class="variable language_">this</span>.<span class="property">msg</span>.<span class="title function_">substring</span>(<span class="number">1</span>) + <span class="variable language_">this</span>.<span class="property">msg</span>.<span class="title function_">substring</span>(<span class="number">0</span>,<span class="number">1</span>);</span><br><span class="line">        &#125;, <span class="number">400</span>)</span><br><span class="line"></span><br><span class="line">        <span class="comment">// 注意： VM实例，会监听自己身上data中所有数据的改变，只要数据一发生变化，就会自动把 最新的数据，从			data 上同步到页面中去；【好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面】</span></span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="title function_">stop</span>(<span class="params"></span>) &#123; <span class="comment">// 停止定时器</span></span><br><span class="line">        <span class="built_in">clearInterval</span>(<span class="variable language_">this</span>.<span class="property">intervalId</span>)</span><br><span class="line">        <span class="comment">// 每当清除了定时器之后，需要重新把 intervalId 置为 null</span></span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">intervalId</span> = <span class="literal">null</span>;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br></pre></td></tr></table></figure>

<h2 id=""><a href="#" class="headerlink" title=""></a></h2><h1 id="6-Vue指令之事件修饰符"><a href="#6-Vue指令之事件修饰符" class="headerlink" title="6. Vue指令之事件修饰符"></a>6. Vue指令之事件修饰符</h1><ul>
<li>.stop       阻止冒泡</li>
<li>.prevent    阻止默认事件</li>
<li>.capture    添加事件侦听器时使用事件捕获模式</li>
<li>.self       只当事件在该元素本身（比如不是子元素）触发时触发回调</li>
<li>.once       事件只触发一次</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span>=<span class="string">&quot;ie=edge&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css">    <span class="selector-class">.inner</span> &#123;</span></span><br><span class="line"><span class="language-css">      <span class="attribute">height</span>: <span class="number">150px</span>;</span></span><br><span class="line"><span class="language-css">      <span class="attribute">background-color</span>: darkcyan;</span></span><br><span class="line"><span class="language-css">    &#125;</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css">    <span class="selector-class">.outer</span> &#123;</span></span><br><span class="line"><span class="language-css">      <span class="attribute">padding</span>: <span class="number">40px</span>;</span></span><br><span class="line"><span class="language-css">      <span class="attribute">background-color</span>: pink;</span></span><br><span class="line"><span class="language-css">    &#125;</span></span><br><span class="line"><span class="language-css">  </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- 使用  .stop  阻止冒泡 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;inner&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;div1Handler&quot;</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> <span class="attr">value</span>=<span class="string">&quot;戳他1&quot;</span> @<span class="attr">click.stop</span>=<span class="string">&quot;btnHandler&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- 使用 .prevent 阻止默认行为 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;http://www.baidu.com&quot;</span> @<span class="attr">click.prevent</span>=<span class="string">&quot;linkClick&quot;</span>&gt;</span>有问题，先去百度<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- 使用  .capture 实现捕获触发事件的机制 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;inner&quot;</span> @<span class="attr">click.capture</span>=<span class="string">&quot;div1Handler&quot;</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> <span class="attr">value</span>=<span class="string">&quot;戳他2&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;btnHandler&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- 使用 .self 实现只有点击当前元素时候，才会触发事件处理函数 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;inner&quot;</span> @<span class="attr">click.self</span>=<span class="string">&quot;div1Handler&quot;</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> <span class="attr">value</span>=<span class="string">&quot;戳他3&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;btnHandler&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- 使用 .once 只触发一次事件处理函数 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;http://www.baidu.com&quot;</span> @<span class="attr">click.prevent.once</span>=<span class="string">&quot;linkClick&quot;</span>&gt;</span>有问题，先去百度<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- 演示： .stop 和 .self 的区别 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;outer&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;div2Handler&quot;</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;inner&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;div1Handler&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> <span class="attr">value</span>=<span class="string">&quot;戳他4&quot;</span> @<span class="attr">click.stop</span>=<span class="string">&quot;btnHandler&quot;</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- .self 只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;outer&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;div2Handler&quot;</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;inner&quot;</span> @<span class="attr">click.self</span>=<span class="string">&quot;div1Handler&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> <span class="attr">value</span>=<span class="string">&quot;戳他5&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;btnHandler&quot;</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">data</span>: &#123;&#125;,</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">methods</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="title function_">div1Handler</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">          <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;这是触发了 inner div 的点击事件&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">        &#125;,</span></span><br><span class="line"><span class="language-javascript">        <span class="title function_">btnHandler</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">          <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;这是触发了 btn 按钮 的点击事件&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">        &#125;,</span></span><br><span class="line"><span class="language-javascript">        <span class="title function_">linkClick</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">          <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;触发了连接的点击事件&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">        &#125;,</span></span><br><span class="line"><span class="language-javascript">        <span class="title function_">div2Handler</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">          <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;这是触发了 outer div 的点击事件&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript">      &#125;</span></span><br><span class="line"><span class="language-javascript">    &#125;);</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>



<h1 id="7-Vue指令之v-model和双向数据绑定"><a href="#7-Vue指令之v-model和双向数据绑定" class="headerlink" title="7. Vue指令之v-model和双向数据绑定"></a>7. Vue指令之v-model和双向数据绑定</h1><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span>=<span class="string">&quot;ie=edge&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h4</span>&gt;</span>&#123;&#123; msg &#125;&#125;<span class="tag">&lt;/<span class="name">h4</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- v-bind 只能实现数据的单向绑定，从 M 自动绑定到 V， 无法实现数据的双向绑定  --&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- &lt;input type=&quot;text&quot; v-bind:value=&quot;msg&quot; style=&quot;width:100%;&quot;&gt; --&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- 使用  v-model 指令，可以实现 表单元素和 Model 中数据的双向数据绑定 --&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 注意： v-model 只能运用在 表单元素中 --&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- input(radio, text, address, email....)   select    checkbox   textarea   --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">style</span>=<span class="string">&quot;width:100%;&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;msg&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">msg</span>: <span class="string">&#x27;我是好男人，爱敲代码，爱学习，爱思考，简直是完美，没瑕疵！&#x27;</span></span></span><br><span class="line"><span class="language-javascript">      &#125;</span></span><br><span class="line"><span class="language-javascript">    &#125;);</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>



<h2 id="7-1-简易计算器案例"><a href="#7-1-简易计算器案例" class="headerlink" title="7.1 简易计算器案例"></a>7.1 简易计算器案例</h2><ol>
<li>HTML 代码结构</li>
</ol>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&lt;div id=&quot;app&quot;&gt;</span><br><span class="line">    &lt;input type=&quot;text&quot; v-model=&quot;n1&quot;&gt;</span><br><span class="line">    &lt;select v-model=&quot;opt&quot;&gt;</span><br><span class="line">      &lt;option value=&quot;+&quot;&gt;+&lt;/option&gt;</span><br><span class="line">      &lt;option value=&quot;-&quot;&gt;-&lt;/option&gt;</span><br><span class="line">      &lt;option value=&quot;*&quot;&gt;*&lt;/option&gt;</span><br><span class="line">      &lt;option value=&quot;/&quot;&gt;/&lt;/option&gt;</span><br><span class="line">    &lt;/select&gt;</span><br><span class="line">    &lt;input type=&quot;text&quot; v-model=&quot;n2&quot;&gt;</span><br><span class="line">    &lt;input type=&quot;button&quot; value=&quot;=&quot; @click=&quot;calc&quot;&gt;</span><br><span class="line">    &lt;input type=&quot;text&quot; v-model=&quot;result&quot;&gt;</span><br><span class="line">  &lt;/div&gt;</span><br></pre></td></tr></table></figure>

<ol start="2">
<li>Vue实例代码：</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span><br><span class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span><br><span class="line">  <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span><br><span class="line">  <span class="attr">data</span>: &#123;</span><br><span class="line">    <span class="attr">n1</span>: <span class="number">0</span>,</span><br><span class="line">    <span class="attr">n2</span>: <span class="number">0</span>,</span><br><span class="line">    <span class="attr">result</span>: <span class="number">0</span>,</span><br><span class="line">    <span class="attr">opt</span>: <span class="string">&#x27;+&#x27;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">methods</span>: &#123;</span><br><span class="line">    <span class="title function_">calc</span>(<span class="params"></span>) &#123; <span class="comment">// 计算器算数的方法  </span></span><br><span class="line">      <span class="comment">// 逻辑：</span></span><br><span class="line">      <span class="comment">/* switch (this.opt) &#123;</span></span><br><span class="line"><span class="comment">        case &#x27;+&#x27;:</span></span><br><span class="line"><span class="comment">          this.result = parseInt(this.n1) + parseInt(this.n2)</span></span><br><span class="line"><span class="comment">          break;</span></span><br><span class="line"><span class="comment">        case &#x27;-&#x27;:</span></span><br><span class="line"><span class="comment">          this.result = parseInt(this.n1) - parseInt(this.n2)</span></span><br><span class="line"><span class="comment">          break;</span></span><br><span class="line"><span class="comment">        case &#x27;*&#x27;:</span></span><br><span class="line"><span class="comment">          this.result = parseInt(this.n1) * parseInt(this.n2)</span></span><br><span class="line"><span class="comment">          break;</span></span><br><span class="line"><span class="comment">        case &#x27;/&#x27;:</span></span><br><span class="line"><span class="comment">          this.result = parseInt(this.n1) / parseInt(this.n2)</span></span><br><span class="line"><span class="comment">          break;</span></span><br><span class="line"><span class="comment">      &#125; */</span></span><br><span class="line"></span><br><span class="line">      <span class="comment">// 注意：这是投机取巧的方式，正式开发中，尽量少用</span></span><br><span class="line">      <span class="keyword">var</span> codeStr = <span class="string">&#x27;parseInt(this.n1) &#x27;</span> + <span class="variable language_">this</span>.<span class="property">opt</span> + <span class="string">&#x27; parseInt(this.n2)&#x27;</span></span><br><span class="line">      <span class="variable language_">this</span>.<span class="property">result</span> = <span class="built_in">eval</span>(codeStr)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h1 id="8-在Vue中使用样式"><a href="#8-在Vue中使用样式" class="headerlink" title="8. 在Vue中使用样式"></a>8. 在Vue中使用样式</h1><h2 id="8-1-使用class样式"><a href="#8-1-使用class样式" class="headerlink" title="8.1 使用class样式"></a>8.1 使用class样式</h2><ol>
<li><p>数组</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;h1 :class=&quot;[&#x27;red&#x27;, &#x27;thin&#x27;]&quot;&gt;这是一个邪恶的H1&lt;/h1&gt;</span><br></pre></td></tr></table></figure></li>
<li><p>数组中使用三元表达式</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;h1 :class=&quot;[&#x27;red&#x27;, &#x27;thin&#x27;, isactive?&#x27;active&#x27;:&#x27;&#x27;]&quot;&gt;这是一个邪恶的H1&lt;/h1&gt;</span><br></pre></td></tr></table></figure></li>
<li><p>数组中嵌套对象</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;h1 :class=&quot;[&#x27;red&#x27;, &#x27;thin&#x27;, &#123;&#x27;active&#x27;: isactive&#125;]&quot;&gt;这是一个邪恶的H1&lt;/h1&gt;</span><br></pre></td></tr></table></figure></li>
<li><p>直接使用对象</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;h1 :class=&quot;&#123;red:true, italic:true, active:true, thin:true&#125;&quot;&gt;这是一个邪恶的H1&lt;/h1&gt;</span><br></pre></td></tr></table></figure></li>
</ol>
<h2 id="8-2-使用内联样式"><a href="#8-2-使用内联样式" class="headerlink" title="8.2 使用内联样式"></a>8.2 使用内联样式</h2><ol>
<li><p>直接在元素上通过 <code>:style</code> 的形式，书写样式对象</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;h1 :style=&quot;&#123;color: &#x27;red&#x27;, &#x27;font-size&#x27;: &#x27;40px&#x27;&#125;&quot;&gt;这是一个善良的H1&lt;/h1&gt;</span><br></pre></td></tr></table></figure></li>
<li><p>将样式对象，定义到 <code>data</code> 中，并直接引用到 <code>:style</code> 中</p>
</li>
</ol>
<ul>
<li>在data上定义样式：<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">data</span>: &#123;</span><br><span class="line">   <span class="attr">h1StyleObj</span>: &#123; <span class="attr">color</span>: <span class="string">&#x27;red&#x27;</span>, <span class="string">&#x27;font-size&#x27;</span>: <span class="string">&#x27;40px&#x27;</span>, <span class="string">&#x27;font-weight&#x27;</span>: <span class="string">&#x27;200&#x27;</span> &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li>在元素中，通过属性绑定的形式，将样式对象应用到元素中：<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;h1 :style=&quot;h1StyleObj&quot;&gt;这是一个善良的H1&lt;/h1&gt;</span><br></pre></td></tr></table></figure></li>
</ul>
<ol start="3">
<li>在 <code>:style</code> 中通过数组，引用多个 <code>data</code> 上的样式对象</li>
</ol>
<ul>
<li>在data上定义样式：<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">data</span>: &#123;</span><br><span class="line">    <span class="attr">h1StyleObj</span>: &#123; <span class="attr">color</span>: <span class="string">&#x27;red&#x27;</span>, <span class="string">&#x27;font-size&#x27;</span>: <span class="string">&#x27;40px&#x27;</span>, <span class="string">&#x27;font-weight&#x27;</span>: <span class="string">&#x27;200&#x27;</span> &#125;,</span><br><span class="line">    <span class="attr">h1StyleObj2</span>: &#123; <span class="attr">fontStyle</span>: <span class="string">&#x27;italic&#x27;</span> &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li>在元素中，通过属性绑定的形式，将样式对象应用到元素中：<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;h1 :style=&quot;[h1StyleObj, h1StyleObj2]&quot;&gt;这是一个善良的H1&lt;/h1&gt;</span><br></pre></td></tr></table></figure></li>
</ul>
<h2 id="8-3-样式综合练习"><a href="#8-3-样式综合练习" class="headerlink" title="8.3 样式综合练习"></a>8.3 样式综合练习</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span>=<span class="string">&quot;ie=edge&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css">    <span class="selector-class">.red</span> &#123;</span></span><br><span class="line"><span class="language-css">      <span class="attribute">color</span>: red;</span></span><br><span class="line"><span class="language-css">    &#125;</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css">    <span class="selector-class">.thin</span> &#123;</span></span><br><span class="line"><span class="language-css">      <span class="attribute">font-weight</span>: <span class="number">200</span>;</span></span><br><span class="line"><span class="language-css">    &#125;</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css">    <span class="selector-class">.italic</span> &#123;</span></span><br><span class="line"><span class="language-css">      <span class="attribute">font-style</span>: italic;</span></span><br><span class="line"><span class="language-css">    &#125;</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css">    <span class="selector-class">.active</span> &#123;</span></span><br><span class="line"><span class="language-css">      <span class="attribute">letter-spacing</span>: <span class="number">0.5em</span>;</span></span><br><span class="line"><span class="language-css">    &#125;</span></span><br><span class="line"><span class="language-css">  </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span> <span class="attr">class</span>=<span class="string">&quot;red thin&quot;</span>&gt;</span>这是一个很大很大的H1，大到你无法想象！！！<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 第一种使用方式，直接传递一个数组，注意： 这里的 class 需要使用  v-bind 做数据绑定 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span> <span class="attr">:class</span>=<span class="string">&quot;[&#x27;thin&#x27;, &#x27;italic&#x27;]&quot;</span>&gt;</span>这是一个很大很大的H1，大到你无法想象！！！<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 在数组中使用三元表达式 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span> <span class="attr">:class</span>=<span class="string">&quot;[&#x27;thin&#x27;, &#x27;italic&#x27;, flag?&#x27;active&#x27;:&#x27;&#x27;]&quot;</span>&gt;</span>这是一个很大很大的H1，大到你无法想象！！！<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 在数组中使用 对象来代替三元表达式，提高代码的可读性 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span> <span class="attr">:class</span>=<span class="string">&quot;[&#x27;thin&#x27;, &#x27;italic&#x27;, &#123;&#x27;active&#x27;:flag&#125; ]&quot;</span>&gt;</span>这是一个很大很大的H1，大到你无法想象！！！<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 在为 class 使用 v-bind 绑定 对象的时候，对象的属性是类名，由于 对象的属性可带引号，也可不带引号，所以 这里我没写引号；  属性的值 是一个标识符 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span> <span class="attr">:class</span>=<span class="string">&quot;classObj&quot;</span>&gt;</span>这是一个很大很大的H1，大到你无法想象！！！<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">flag</span>: <span class="literal">true</span>,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">classObj</span>: &#123; <span class="attr">red</span>: <span class="literal">true</span>, <span class="attr">thin</span>: <span class="literal">true</span>, <span class="attr">italic</span>: <span class="literal">false</span>, <span class="attr">active</span>: <span class="literal">false</span> &#125;</span></span><br><span class="line"><span class="language-javascript">      &#125;,</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">methods</span>: &#123;&#125;</span></span><br><span class="line"><span class="language-javascript">    &#125;);</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span>=<span class="string">&quot;ie=edge&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 对象就是无序键值对的集合 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span> <span class="attr">:style</span>=<span class="string">&quot;styleObj1&quot;</span>&gt;</span>哈哈哈，我笑了<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span> <span class="attr">:style</span>=<span class="string">&quot;[ styleObj1, styleObj2 ]&quot;</span>&gt;</span>呜呜呜，我哭了<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">styleObj1</span>: &#123; <span class="attr">color</span>: <span class="string">&#x27;red&#x27;</span>, <span class="string">&#x27;font-weight&#x27;</span>: <span class="number">200</span> &#125;,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">styleObj2</span>: &#123; <span class="string">&#x27;font-style&#x27;</span>: <span class="string">&#x27;italic&#x27;</span> &#125;</span></span><br><span class="line"><span class="language-javascript">      &#125;,</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">methods</span>: &#123;&#125;</span></span><br><span class="line"><span class="language-javascript">    &#125;);</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>



<h1 id="9-Vue指令之v-for和key属性"><a href="#9-Vue指令之v-for和key属性" class="headerlink" title="9. Vue指令之v-for和key属性"></a>9. Vue指令之v-for和key属性</h1><ol>
<li>迭代数组</li>
</ol>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;ul&gt;</span><br><span class="line">  &lt;li v-for=&quot;(item, i) in list&quot;&gt;索引：&#123;&#123;i&#125;&#125; --- 姓名：&#123;&#123;item.name&#125;&#125; --- 年龄：&#123;&#123;item.age&#125;&#125;&lt;/li&gt;</span><br><span class="line">&lt;/ul&gt;</span><br></pre></td></tr></table></figure>

<ol start="2">
<li>迭代对象中的属性</li>
</ol>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 循环遍历对象身上的属性 --&gt;</span><br><span class="line">&lt;div v-for=&quot;(val, key, i) in userInfo&quot;&gt;&#123;&#123;val&#125;&#125; --- &#123;&#123;key&#125;&#125; --- &#123;&#123;i&#125;&#125;&lt;/div&gt;</span><br></pre></td></tr></table></figure>

<ol start="3">
<li>迭代数字</li>
</ol>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"> &lt;!-- 注意：如果使用 v-for 迭代数字的话，前面的 count 值从 1 开始 --&gt;</span><br><span class="line">&lt;p v-for=&quot;i in 10&quot;&gt;这是第 &#123;&#123;i&#125;&#125; 个P标签&lt;/p&gt; </span><br></pre></td></tr></table></figure>

<blockquote>
<p>2.2.0+ 的版本里，<strong>当在组件中使用</strong> v-for 时，key 现在是必须的。</p>
</blockquote>
<p>当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “<strong>就地复用</strong>” 策略。如果数据项的顺序被改变，Vue将<strong>不是移动 DOM 元素来匹配数据项的顺序</strong>， 而是<strong>简单复用此处每个元素</strong>，并且确保它在特定索引下显示已被渲染过的每个元素。</p>
<p>为了给 Vue 一个提示，<strong>以便它能跟踪每个节点的身份，从而重用和重新排序现有元素</strong>，你需要为每项提供一个唯一 key 属性。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span>=<span class="string">&quot;ie=edge&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">label</span>&gt;</span>Id:</span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;id&quot;</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line"></span><br><span class="line">      <span class="tag">&lt;<span class="name">label</span>&gt;</span>Name:</span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;name&quot;</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line"></span><br><span class="line">      <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> <span class="attr">value</span>=<span class="string">&quot;添加&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;add&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- 注意： v-for 循环的时候，key 属性只能使用 number获取string --&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 注意： key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值 --&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果 v-for 有问题，必须 在使用 v-for 的同时，指定 唯一的 字符串/数字 类型 :key 值 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">v-for</span>=<span class="string">&quot;item in list&quot;</span> <span class="attr">:key</span>=<span class="string">&quot;item.id&quot;</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;checkbox&quot;</span>&gt;</span>&#123;&#123;item.id&#125;&#125; --- &#123;&#123;item.name&#125;&#125;</span><br><span class="line">    <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">id</span>: <span class="string">&#x27;&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">name</span>: <span class="string">&#x27;&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">list</span>: [</span></span><br><span class="line"><span class="language-javascript">          &#123; <span class="attr">id</span>: <span class="number">1</span>, <span class="attr">name</span>: <span class="string">&#x27;李斯&#x27;</span> &#125;,</span></span><br><span class="line"><span class="language-javascript">          &#123; <span class="attr">id</span>: <span class="number">2</span>, <span class="attr">name</span>: <span class="string">&#x27;嬴政&#x27;</span> &#125;,</span></span><br><span class="line"><span class="language-javascript">          &#123; <span class="attr">id</span>: <span class="number">3</span>, <span class="attr">name</span>: <span class="string">&#x27;赵高&#x27;</span> &#125;,</span></span><br><span class="line"><span class="language-javascript">          &#123; <span class="attr">id</span>: <span class="number">4</span>, <span class="attr">name</span>: <span class="string">&#x27;韩非&#x27;</span> &#125;,</span></span><br><span class="line"><span class="language-javascript">          &#123; <span class="attr">id</span>: <span class="number">5</span>, <span class="attr">name</span>: <span class="string">&#x27;荀子&#x27;</span> &#125;</span></span><br><span class="line"><span class="language-javascript">        ]</span></span><br><span class="line"><span class="language-javascript">      &#125;,</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">methods</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="title function_">add</span>(<span class="params"></span>) &#123; <span class="comment">// 添加方法</span></span></span><br><span class="line"><span class="language-javascript">          <span class="variable language_">this</span>.<span class="property">list</span>.<span class="title function_">unshift</span>(&#123; <span class="attr">id</span>: <span class="variable language_">this</span>.<span class="property">id</span>, <span class="attr">name</span>: <span class="variable language_">this</span>.<span class="property">name</span> &#125;)</span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript">      &#125;</span></span><br><span class="line"><span class="language-javascript">    &#125;);</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>



<h1 id="10-Vue指令之v-if和v-show"><a href="#10-Vue指令之v-if和v-show" class="headerlink" title="10. Vue指令之v-if和v-show"></a>10. Vue指令之v-if和v-show</h1><blockquote>
<p>一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span>=<span class="string">&quot;ie=edge&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- &lt;input type=&quot;button&quot; value=&quot;toggle&quot; @click=&quot;toggle&quot;&gt; --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> <span class="attr">value</span>=<span class="string">&quot;toggle&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;flag=!flag&quot;</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- v-if 的特点：每次都会重新删除或创建元素 --&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- v-show 的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式 --&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- v-if 有较高的切换性能消耗 --&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- v-show 有较高的初始渲染消耗 --&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show --&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h3</span> <span class="attr">v-if</span>=<span class="string">&quot;flag&quot;</span>&gt;</span>这是用v-if控制的元素<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h3</span> <span class="attr">v-show</span>=<span class="string">&quot;flag&quot;</span>&gt;</span>这是用v-show控制的元素<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">flag</span>: <span class="literal">false</span></span></span><br><span class="line"><span class="language-javascript">      &#125;,</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">methods</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="comment">/* </span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">            toggle() &#123;</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">              this.flag = !this.flag</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">            &#125; </span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">        */</span></span></span><br><span class="line"><span class="language-javascript">      &#125;</span></span><br><span class="line"><span class="language-javascript">    &#125;);</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="10-1-根据条件筛选数据"><a href="#10-1-根据条件筛选数据" class="headerlink" title="10.1 根据条件筛选数据"></a>10.1 根据条件筛选数据</h2><ol>
<li>1.x 版本中的filterBy指令，在2.x中已经被废除：</li>
</ol>
<p><a target="_blank" rel="noopener" href="https://v1-cn.vuejs.org/api/#filterBy">filterBy - 指令</a></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&lt;tr v-for=&quot;item in list | filterBy searchName in &#x27;name&#x27;&quot;&gt;</span><br><span class="line">  &lt;td&gt;&#123;&#123;item.id&#125;&#125;&lt;/td&gt;</span><br><span class="line">  &lt;td&gt;&#123;&#123;item.name&#125;&#125;&lt;/td&gt;</span><br><span class="line">  &lt;td&gt;&#123;&#123;item.ctime&#125;&#125;&lt;/td&gt;</span><br><span class="line">  &lt;td&gt;</span><br><span class="line">    &lt;a href=&quot;#&quot; @click.prevent=&quot;del(item.id)&quot;&gt;删除&lt;/a&gt;</span><br><span class="line">  &lt;/td&gt;</span><br><span class="line">&lt;/tr&gt;</span><br></pre></td></tr></table></figure>

<ol start="2">
<li>在2.x版本中<a target="_blank" rel="noopener" href="https://cn.vuejs.org/v2/guide/list.html#%E6%98%BE%E7%A4%BA%E8%BF%87%E6%BB%A4-%E6%8E%92%E5%BA%8F%E7%BB%93%E6%9E%9C">手动实现筛选的方式</a>：</li>
</ol>
<ul>
<li>筛选框绑定到 VM 实例中的 <code>searchName</code> 属性：</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;hr&gt; 输入筛选名称：</span><br><span class="line">&lt;input type=&quot;text&quot; v-model=&quot;searchName&quot;&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li>在使用 <code>v-for</code> 指令循环每一行数据的时候，不再直接 <code>item in list</code>，而是 <code>in</code> 一个 过滤的methods 方法，同时，把过滤条件<code>searchName</code>传递进去：</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">&lt;tbody&gt;</span><br><span class="line">      &lt;tr v-for=&quot;item in search(searchName)&quot;&gt;</span><br><span class="line">        &lt;td&gt;&#123;&#123;item.id&#125;&#125;&lt;/td&gt;</span><br><span class="line">        &lt;td&gt;&#123;&#123;item.name&#125;&#125;&lt;/td&gt;</span><br><span class="line">        &lt;td&gt;&#123;&#123;item.ctime&#125;&#125;&lt;/td&gt;</span><br><span class="line">        &lt;td&gt;</span><br><span class="line">          &lt;a href=&quot;#&quot; @click.prevent=&quot;del(item.id)&quot;&gt;删除&lt;/a&gt;</span><br><span class="line">        &lt;/td&gt;</span><br><span class="line">      &lt;/tr&gt;</span><br><span class="line">&lt;/tbody&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<ul>
<li><code>search</code> 过滤方法中，使用数组的 filter方法进行过滤：</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">add</span>(<span class="params"></span>) &#123; <span class="comment">// 添加的方法</span></span><br><span class="line">          <span class="comment">// console.log(&#x27;ok&#x27;)</span></span><br><span class="line">          <span class="comment">// 分析：</span></span><br><span class="line">          <span class="comment">// 1. 获取到 id 和 name ,直接从 data 上面获取 </span></span><br><span class="line">          <span class="comment">// 2. 组织出一个对象</span></span><br><span class="line">          <span class="comment">// 3. 把这个对象，调用 数组的 相关方法，添加到 当前 data 上的 list 中</span></span><br><span class="line">          <span class="comment">// 4. 注意：在Vue中，已经实现了数据的双向绑定，每当我们修改了 data 中的数据，Vue会默认监听到数据的改动，自动把最新的数据，应用到页面上；</span></span><br><span class="line">          <span class="comment">// 5. 当我们意识到上面的第四步的时候，就证明大家已经入门Vue了，我们更多的是在进行 VM中 Model 数据的操作，同时，在操作Model数据的时候，指定的业务逻辑操作；</span></span><br><span class="line"></span><br><span class="line">          <span class="keyword">var</span> car = &#123; <span class="attr">id</span>: <span class="variable language_">this</span>.<span class="property">id</span>, <span class="attr">name</span>: <span class="variable language_">this</span>.<span class="property">name</span>, <span class="attr">ctime</span>: <span class="keyword">new</span> <span class="title class_">Date</span>() &#125;</span><br><span class="line">          <span class="variable language_">this</span>.<span class="property">list</span>.<span class="title function_">push</span>(car)</span><br><span class="line">          <span class="variable language_">this</span>.<span class="property">id</span> = <span class="variable language_">this</span>.<span class="property">name</span> = <span class="string">&#x27;&#x27;</span></span><br><span class="line">&#125;,</span><br><span class="line"><span class="title function_">search</span>(<span class="params">name</span>) &#123;</span><br><span class="line">   <span class="comment">/*</span></span><br><span class="line"><span class="comment">   		var newList = []</span></span><br><span class="line"><span class="comment">          this.list.forEach(item =&gt; &#123;</span></span><br><span class="line"><span class="comment">            if (item.name.indexOf(keywords) != -1) &#123;</span></span><br><span class="line"><span class="comment">              newList.push(item)</span></span><br><span class="line"><span class="comment">            &#125;</span></span><br><span class="line"><span class="comment">          &#125;)</span></span><br><span class="line"><span class="comment">          return newList </span></span><br><span class="line"><span class="comment">    */</span></span><br><span class="line">    <span class="comment">// 注意：  forEach   some   filter   findIndex   这些都属于数组的新方法，</span></span><br><span class="line">     <span class="comment">//  都会对数组中的每一项，进行遍历，执行相关的操作；</span></span><br><span class="line"> 	<span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">list</span>.<span class="title function_">filter</span>(<span class="function"><span class="params">item</span> =&gt;</span> &#123;</span><br><span class="line">            <span class="comment">// if(item.name.indexOf(keywords) != -1)</span></span><br><span class="line">            <span class="comment">// 注意 ： ES6中，为字符串提供了一个新方法，叫做  String.prototype.includes(&#x27;要包含的字符串&#x27;)</span></span><br><span class="line">            <span class="comment">//  如果包含，则返回 true ，否则返回 false</span></span><br><span class="line">            <span class="comment">//  contain</span></span><br><span class="line">            <span class="keyword">if</span> (item.<span class="property">name</span>.<span class="title function_">includes</span>(keywords)) &#123;</span><br><span class="line">              <span class="keyword">return</span> item;</span><br><span class="line">            &#125;</span><br><span class="line">     &#125;)</span><br><span class="line">&#125;,</span><br><span class="line"><span class="title function_">del</span>(<span class="params">id</span>) &#123;</span><br><span class="line">    <span class="comment">/*</span></span><br><span class="line"><span class="comment">        需求：</span></span><br><span class="line"><span class="comment">        	根据Id删除数据</span></span><br><span class="line"><span class="comment">        分析：</span></span><br><span class="line"><span class="comment">        	1. 如何根据Id，找到要删除这一项的索引</span></span><br><span class="line"><span class="comment">        	2. 如果找到索引了，直接调用 数组的 splice 方法</span></span><br><span class="line"><span class="comment">    */</span></span><br><span class="line">         </span><br><span class="line">    <span class="comment">/* this.list.some((item, i) =&gt; &#123;</span></span><br><span class="line"><span class="comment">      if (item.id == id) &#123;</span></span><br><span class="line"><span class="comment">          this.list.splice(i, 1)</span></span><br><span class="line"><span class="comment">          // 在 数组的 some 方法中，如果 return true，就会立即终止这个数组的后续循环</span></span><br><span class="line"><span class="comment">          return true;</span></span><br><span class="line"><span class="comment">       &#125;</span></span><br><span class="line"><span class="comment">   &#125;) */</span></span><br><span class="line"></span><br><span class="line">    <span class="keyword">var</span> index = <span class="variable language_">this</span>.<span class="property">list</span>.<span class="title function_">findIndex</span>(<span class="function"><span class="params">item</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">if</span> (item.<span class="property">id</span> == id) &#123;</span><br><span class="line">           <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">   		&#125;</span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="comment">// console.log(index)</span></span><br><span class="line"> 	<span class="variable language_">this</span>.<span class="property">list</span>.<span class="title function_">splice</span>(index, <span class="number">1</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h1 id="11-过滤器"><a href="#11-过滤器" class="headerlink" title="11. 过滤器"></a>11. 过滤器</h1><p>概念：Vue.js 允许你自定义过滤器，<strong>可被用作一些常见的文本格式化</strong>。过滤器可以用在两个地方：<strong>mustache 插值和 v-bind 表达式</strong>。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示；</p>
<h2 id="11-1-私有过滤器"><a href="#11-1-私有过滤器" class="headerlink" title="11.1 私有过滤器"></a>11.1 私有过滤器</h2><ol>
<li>HTML元素：</li>
</ol>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;td&gt;&#123;&#123;item.ctime | dataFormat(&#x27;yyyy-mm-dd&#x27;)&#125;&#125;&lt;/td&gt;</span><br></pre></td></tr></table></figure>

<ol start="2">
<li>私有 <code>filters</code> 定义方式：</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">filters</span>: &#123; <span class="comment">// 私有局部过滤器，只能在 当前 VM 对象所控制的 View 区域进行使用</span></span><br><span class="line">    <span class="title function_">dataFormat</span>(<span class="params">input, pattern = <span class="string">&quot;&quot;</span></span>) &#123; <span class="comment">// 在参数列表中 通过 pattern=&quot;&quot; 来指定形参默认值，防止报错</span></span><br><span class="line">      <span class="keyword">var</span> dt = <span class="keyword">new</span> <span class="title class_">Date</span>(input);</span><br><span class="line">      <span class="comment">// 获取年月日</span></span><br><span class="line">      <span class="keyword">var</span> y = dt.<span class="title function_">getFullYear</span>();</span><br><span class="line">      <span class="keyword">var</span> m = (dt.<span class="title function_">getMonth</span>() + <span class="number">1</span>).<span class="title function_">toString</span>().<span class="title function_">padStart</span>(<span class="number">2</span>, <span class="string">&#x27;0&#x27;</span>);</span><br><span class="line">      <span class="keyword">var</span> d = dt.<span class="title function_">getDate</span>().<span class="title function_">toString</span>().<span class="title function_">padStart</span>(<span class="number">2</span>, <span class="string">&#x27;0&#x27;</span>);</span><br><span class="line">      </span><br><span class="line">      <span class="comment">// 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日</span></span><br><span class="line">      <span class="comment">// 否则，就返回  年-月-日 时：分：秒</span></span><br><span class="line">      <span class="keyword">if</span> (pattern.<span class="title function_">toLowerCase</span>() === <span class="string">&#x27;yyyy-mm-dd&#x27;</span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="string">`<span class="subst">$&#123;y&#125;</span>-<span class="subst">$&#123;m&#125;</span>-<span class="subst">$&#123;d&#125;</span>`</span>;</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="comment">// 获取时分秒</span></span><br><span class="line">        <span class="keyword">var</span> hh = dt.<span class="title function_">getHours</span>().<span class="title function_">toString</span>().<span class="title function_">padStart</span>(<span class="number">2</span>, <span class="string">&#x27;0&#x27;</span>);</span><br><span class="line">        <span class="keyword">var</span> mm = dt.<span class="title function_">getMinutes</span>().<span class="title function_">toString</span>().<span class="title function_">padStart</span>(<span class="number">2</span>, <span class="string">&#x27;0&#x27;</span>);</span><br><span class="line">        <span class="keyword">var</span> ss = dt.<span class="title function_">getSeconds</span>().<span class="title function_">toString</span>().<span class="title function_">padStart</span>(<span class="number">2</span>, <span class="string">&#x27;0&#x27;</span>);</span><br><span class="line">        <span class="keyword">return</span> <span class="string">`<span class="subst">$&#123;y&#125;</span>-<span class="subst">$&#123;m&#125;</span>-<span class="subst">$&#123;d&#125;</span> <span class="subst">$&#123;hh&#125;</span>:<span class="subst">$&#123;mm&#125;</span>:<span class="subst">$&#123;ss&#125;</span>`</span>;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString=’’) 或 String.prototype.padEnd(maxLength, fillString=’’)来填充字符串；</p>
</blockquote>
<h2 id="11-2-全局过滤器"><a href="#11-2-全局过滤器" class="headerlink" title="11.2 全局过滤器"></a>11.2 全局过滤器</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 定义一个全局过滤器</span></span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">filter</span>(<span class="string">&#x27;dataFormat&#x27;</span>, <span class="keyword">function</span> (<span class="params">input, pattern = <span class="string">&#x27;&#x27;</span></span>) &#123;</span><br><span class="line">  <span class="keyword">var</span> dt = <span class="keyword">new</span> <span class="title class_">Date</span>(input);</span><br><span class="line">  <span class="comment">// 获取年月日</span></span><br><span class="line">  <span class="keyword">var</span> y = dt.<span class="title function_">getFullYear</span>();</span><br><span class="line">  <span class="keyword">var</span> m = (dt.<span class="title function_">getMonth</span>() + <span class="number">1</span>).<span class="title function_">toString</span>().<span class="title function_">padStart</span>(<span class="number">2</span>, <span class="string">&#x27;0&#x27;</span>);</span><br><span class="line">  <span class="keyword">var</span> d = dt.<span class="title function_">getDate</span>().<span class="title function_">toString</span>().<span class="title function_">padStart</span>(<span class="number">2</span>, <span class="string">&#x27;0&#x27;</span>);</span><br><span class="line">  <span class="comment">// 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日</span></span><br><span class="line">  <span class="comment">// 否则，就返回  年-月-日 时：分：秒</span></span><br><span class="line">  <span class="keyword">if</span> (pattern.<span class="title function_">toLowerCase</span>() === <span class="string">&#x27;yyyy-mm-dd&#x27;</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">`<span class="subst">$&#123;y&#125;</span>-<span class="subst">$&#123;m&#125;</span>-<span class="subst">$&#123;d&#125;</span>`</span>;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="comment">// 获取时分秒,padStart是ES6的新方法，不够补几位数补0</span></span><br><span class="line">    <span class="keyword">var</span> hh = dt.<span class="title function_">getHours</span>().<span class="title function_">toString</span>().,<span class="title function_">padStart</span>(<span class="number">2</span>, <span class="string">&#x27;0&#x27;</span>);</span><br><span class="line">    <span class="keyword">var</span> mm = dt.<span class="title function_">getMinutes</span>().<span class="title function_">toString</span>().<span class="title function_">padStart</span>(<span class="number">2</span>, <span class="string">&#x27;0&#x27;</span>);</span><br><span class="line">    <span class="keyword">var</span> ss = dt.<span class="title function_">getSeconds</span>().<span class="title function_">toString</span>().<span class="title function_">padStart</span>(<span class="number">2</span>, <span class="string">&#x27;0&#x27;</span>);</span><br><span class="line">    <span class="keyword">return</span> <span class="string">`<span class="subst">$&#123;y&#125;</span>-<span class="subst">$&#123;m&#125;</span>-<span class="subst">$&#123;d&#125;</span> <span class="subst">$&#123;hh&#125;</span>:<span class="subst">$&#123;mm&#125;</span>:<span class="subst">$&#123;ss&#125;</span>`</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<blockquote>
<p>注意：当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span>=<span class="string">&quot;ie=edge&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">     <span class="comment">&lt;!-- 多个过滤器可以用|起来 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123; msg | msgFormat(&#x27;疯狂+1&#x27;, &#x27;123&#x27;) | test &#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 定义一个 Vue 全局的过滤器，名字叫做  msgFormat</span></span></span><br><span class="line"><span class="language-javascript">    <span class="title class_">Vue</span>.<span class="title function_">filter</span>(<span class="string">&#x27;msgFormat&#x27;</span>, <span class="keyword">function</span> (<span class="params">msg, arg, arg2</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则</span></span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">return</span> msg.<span class="title function_">replace</span>(<span class="regexp">/单纯/g</span>, arg + arg2)</span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="title class_">Vue</span>.<span class="title function_">filter</span>(<span class="string">&#x27;test&#x27;</span>, <span class="keyword">function</span> (<span class="params">msg</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">return</span> msg + <span class="string">&#x27;========&#x27;</span></span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">msg</span>: <span class="string">&#x27;曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人&#x27;</span></span></span><br><span class="line"><span class="language-javascript">      &#125;,</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">methods</span>: &#123;&#125;</span></span><br><span class="line"><span class="language-javascript">    &#125;);</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h1 id="12-键盘修饰符以及自定义键盘修饰符"><a href="#12-键盘修饰符以及自定义键盘修饰符" class="headerlink" title="12. 键盘修饰符以及自定义键盘修饰符"></a>12. 键盘修饰符以及自定义键盘修饰符</h1><h2 id="12-1-1-x中自定义键盘修饰符【了解即可】"><a href="#12-1-1-x中自定义键盘修饰符【了解即可】" class="headerlink" title="12.1 1.x中自定义键盘修饰符【了解即可】"></a>12.1 1.x中自定义键盘修饰符【了解即可】</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">Vue</span>.<span class="title function_">directive</span>(<span class="string">&#x27;on&#x27;</span>).<span class="property">keyCodes</span>.<span class="property">f2</span> = <span class="number">113</span>;</span><br></pre></td></tr></table></figure>

<h2 id="12-2-2-x中自定义键盘修饰符"><a href="#12-2-2-x中自定义键盘修饰符" class="headerlink" title="12.2 2.x中自定义键盘修饰符"></a>12.2 <a target="_blank" rel="noopener" href="https://cn.vuejs.org/v2/guide/events.html#%E9%94%AE%E5%80%BC%E4%BF%AE%E9%A5%B0%E7%AC%A6">2.x中自定义键盘修饰符</a></h2><ol>
<li>通过<code>Vue.config.keyCodes.名称 = 按键值</code>来自定义案件修饰符的别名：</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">Vue</span>.<span class="property">config</span>.<span class="property">keyCodes</span>.<span class="property">f2</span> = <span class="number">113</span>;</span><br></pre></td></tr></table></figure>

<ol start="2">
<li>使用自定义的按键修饰符：</li>
</ol>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;input type=&quot;text&quot; v-model=&quot;name&quot; @keyup.f2=&quot;add&quot;&gt;</span><br></pre></td></tr></table></figure>

<h1 id="13-自定义指令"><a href="#13-自定义指令" class="headerlink" title="13. 自定义指令"></a>13. <a target="_blank" rel="noopener" href="https://cn.vuejs.org/v2/guide/custom-directive.html">自定义指令</a></h1><ol>
<li>自定义全局和局部的 自定义指令：</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 自定义全局指令 v-focus，为绑定的元素自动获取焦点：</span></span><br><span class="line">	<span class="title class_">Vue</span>.<span class="title function_">directive</span>(<span class="string">&#x27;focus&#x27;</span>, &#123;</span><br><span class="line">      <span class="attr">inserted</span>: <span class="keyword">function</span> (<span class="params">el</span>) &#123; <span class="comment">// inserted 表示被绑定元素插入父节点时调用</span></span><br><span class="line">        el.<span class="title function_">focus</span>();</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 自定义局部指令 v-color 和 v-font-weight，为绑定的元素设置指定的字体颜色 和 字体粗细：</span></span><br><span class="line">      <span class="attr">directives</span>: &#123;</span><br><span class="line">        <span class="attr">color</span>: &#123; <span class="comment">// 为元素设置指定的字体颜色</span></span><br><span class="line">          <span class="title function_">bind</span>(<span class="params">el, binding</span>) &#123;</span><br><span class="line">            el.<span class="property">style</span>.<span class="property">color</span> = binding.<span class="property">value</span>;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="string">&#x27;font-weight&#x27;</span>: <span class="keyword">function</span> (<span class="params">el, binding2</span>) &#123; <span class="comment">// 自定义指令的简写形式，等同于定义了 bind 和 update 两个钩子函数</span></span><br><span class="line">          el.<span class="property">style</span>.<span class="property">fontWeight</span> = binding2.<span class="property">value</span>;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br></pre></td></tr></table></figure>

<ol start="2">
<li>自定义指令的使用方式：</li>
</ol>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;input type=&quot;text&quot; v-model=&quot;searchName&quot; v-focus v-color=&quot;&#x27;red&#x27;&quot; v-font-weight=&quot;900&quot;&gt;</span><br></pre></td></tr></table></figure>

<p><strong>Vue 1.x 中 自定义元素指令【已废弃,了解即可】</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">Vue</span>.<span class="title function_">elementDirective</span>(<span class="string">&#x27;red-color&#x27;</span>, &#123;</span><br><span class="line">  <span class="attr">bind</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">el</span>.<span class="property">style</span>.<span class="property">color</span> = <span class="string">&#x27;red&#x27;</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<p>使用方式：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;red-color&gt;1232&lt;/red-color&gt;</span><br></pre></td></tr></table></figure>

<h1 id="14-Vue调试工具vue-devtools的安装步骤和使用"><a href="#14-Vue调试工具vue-devtools的安装步骤和使用" class="headerlink" title="14. Vue调试工具vue-devtools的安装步骤和使用"></a>14. Vue调试工具vue-devtools的安装步骤和使用</h1><p><a target="_blank" rel="noopener" href="https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=zh-CN">Vue.js devtools - 翻墙安装方式 - 推荐</a></p>
<p>安装后，我们浏览器f12按下后会多个vue选项，在这里我们可以实时查看Vue中data数据变化。</p>
<p>如果找不到vue选项，将vue-devtools扩展程序详情打开，将允许访问本地文件网站的选项打开即可。</p>
<h1 id="15-HTTP请求类库"><a href="#15-HTTP请求类库" class="headerlink" title="15. HTTP请求类库"></a>15. HTTP请求类库</h1><p>我们在Java的世界里，Http请求客户端类库真的很多,比如JDK原生的HTTPURLConnection、Apache HttpClient、Square OkHttp、unirest，除此Java之外，Python也有urllib、requests、aiohttp，JavaScript也有Jquery ajax、axios、fetch。下面让我来依次学习。</p>
<p>在学习之前，我们有个前提条件：我们后端Web项目必须跑起来，并且支持跨域，在这里，我是以Spring Boot Web框架开发Java项目，除此之外，读者们可以根据不同的技术栈来开发Web项目，比如Python的Django或者Flask框架、Node.js的express、egg框架。</p>
<h2 id="15-1-XMLHttpRequests-原生Ajax"><a href="#15-1-XMLHttpRequests-原生Ajax" class="headerlink" title="15.1 XMLHttpRequests 原生Ajax"></a>15.1 XMLHttpRequests 原生Ajax</h2><p>原生的写法比较麻烦，要考虑兼容性，现在项目开发几乎很少用这种方式进行ajax请求了。请<a target="_blank" rel="noopener" href="https://www.w3school.com.cn/js/js_ajax_intro.asp">点击这里</a>查看详情。</p>
<h2 id="15-2-JQuery-Ajax"><a href="#15-2-JQuery-Ajax" class="headerlink" title="15.2 JQuery Ajax"></a>15.2 JQuery Ajax</h2><p>虽然说可以异步请求，但是为了不引入Jquery库，防止DOM操作，我们从此刻开始彻底抛弃Jquery Ajax。想要学习JQuery AJax可以<a target="_blank" rel="noopener" href="https://www.runoob.com/jquery/jquery-ajax-intro.html">点击这里</a>进行学习。</p>
<h2 id="15-3-axios"><a href="#15-3-axios" class="headerlink" title="15.3  axios"></a>15.3  axios</h2><h3 id="15-3-1-axios特性"><a href="#15-3-1-axios特性" class="headerlink" title="15.3.1 axios特性"></a>15.3.1 axios特性</h3><p>首先打开<a target="_blank" rel="noopener" href="https://github.com/axios/axios">axios主页</a>,我们可以查看到axios特性:</p>
<ul>
<li>从浏览器端发送 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequests</a> Ajax请求</li>
<li>可以在node.js发送http请求</li>
<li>支持 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a> API</li>
<li>可以拦截请求和响应</li>
<li>能转化请求和响应数据</li>
<li>取消请求</li>
<li>自动转化json数据</li>
<li>客户端支持以防止XSRF，保证请求安全</li>
</ul>
<h3 id="15-3-2-请求示例"><a href="#15-3-2-请求示例" class="headerlink" title="15.3.2 请求示例"></a>15.3.2 请求示例</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> url = <span class="string">&#x27;http://localhost:9999/api/v2/sayHello&#x27;</span></span><br><span class="line"><span class="comment">// 1.发送GET请求</span></span><br><span class="line"><span class="comment">// 1.1 GET无参请求</span></span><br><span class="line">axios.<span class="title function_">get</span>(url).<span class="title function_">then</span>(<span class="function">(<span class="params">rs</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">// rs.data是获取到服务器端的数据</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(rs.<span class="property">data</span>)  <span class="comment">// &#123;msg: &quot;Hello! 无名! Welcome Study JavaScript!&quot;&#125;</span></span><br><span class="line">&#125;).<span class="title function_">catch</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;Http Request Error, url is &#x27;</span> + url)</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">// 1.2 GET有参请求</span></span><br><span class="line"><span class="comment">// 1.2.1 方式一: 通过params形式传递参数 </span></span><br><span class="line">axios.<span class="title function_">get</span>(url, &#123;</span><br><span class="line">  <span class="attr">params</span>: &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;vue&#x27;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;).<span class="title function_">then</span>(<span class="function">(<span class="params">rs</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(rs.<span class="property">data</span>) <span class="comment">// &#123;&quot;msg&quot;:&quot;Hello! vue! Welcome Study JavaScript!&quot;&#125;</span></span><br><span class="line">&#125;).<span class="title function_">catch</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;Http Request Error, url is &#x27;</span> + url)</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">// 1.2.2 方式二: 请求地址追加参数</span></span><br><span class="line">url += <span class="string">&#x27;?name=litong&#x27;</span></span><br><span class="line">axios.<span class="title function_">get</span>(url).<span class="title function_">then</span>(<span class="function">(<span class="params">rs</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">// rs.data是获取到服务器端的数据</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(rs.<span class="property">data</span>)  <span class="comment">// &#123;msg: &quot;Hello! litong! Welcome Study JavaScript!&quot;&#125;</span></span><br><span class="line">&#125;).<span class="title function_">catch</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;Http Request Error, url is &#x27;</span> + url)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2. POST表单请求</span></span><br><span class="line"><span class="keyword">var</span> url =  <span class="string">&#x27;http://localhost:9999/api/v2/doFormPost&#x27;</span></span><br><span class="line"><span class="comment">// 2.1 POST表单请求方式一: 通过URLSearchParams传递参数</span></span><br><span class="line"><span class="keyword">var</span> params = <span class="keyword">new</span> <span class="title class_">URLSearchParams</span>();</span><br><span class="line">params.<span class="title function_">append</span>(<span class="string">&#x27;name&#x27;</span>, <span class="string">&#x27;litong&#x27;</span>);</span><br><span class="line">axios.<span class="title function_">post</span>(url, params).<span class="title function_">then</span>(<span class="keyword">function</span>(<span class="params">ret</span>)&#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(ret.<span class="property">data</span>);</span><br><span class="line">&#125;).<span class="title function_">catch</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;Http Request Error, url is &#x27;</span> + url);</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">// 2.2 POST表单请求方式二: 处理后进行表单请求，传递的参数默认是json数据</span></span><br><span class="line"><span class="title function_">axios</span>(&#123;</span><br><span class="line">  <span class="attr">method</span>: <span class="string">&#x27;post&#x27;</span>,</span><br><span class="line">  <span class="attr">url</span>: url,</span><br><span class="line">  <span class="attr">data</span>: &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;litong&#x27;</span>,</span><br><span class="line">    age : <span class="number">25</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">headers</span>: &#123;</span><br><span class="line">    <span class="string">&#x27;Content-Type&#x27;</span>: <span class="string">&#x27;application/x-www-form-urlencoded&#x27;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">transformRequest</span>: [<span class="keyword">function</span> (<span class="params">data</span>) &#123;</span><br><span class="line">    <span class="comment">// Do whatever you want to transform the data</span></span><br><span class="line">    <span class="keyword">let</span> ret = <span class="string">&#x27;&#x27;</span></span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> it <span class="keyword">in</span> data) &#123;</span><br><span class="line">      ret += <span class="built_in">encodeURIComponent</span>(it) + <span class="string">&#x27;=&#x27;</span> + <span class="built_in">encodeURIComponent</span>(data[it]) + <span class="string">&#x27;&amp;&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> (ret.<span class="title function_">lastIndexOf</span>(<span class="string">&#x27;&amp;&#x27;</span>) == ret.<span class="property">length</span>-<span class="number">1</span>) ? ret.<span class="title function_">substring</span>(<span class="number">0</span>, ret.<span class="property">length</span>-<span class="number">1</span>) : ret</span><br><span class="line">  &#125;],</span><br><span class="line">&#125;);</span><br><span class="line"><span class="comment">// 2.3 POST表单请求方式三: 利用qs模块处理data进行form表单提交</span></span><br><span class="line"><span class="title function_">axios</span>(&#123;</span><br><span class="line">  <span class="attr">url</span>: url,</span><br><span class="line">  <span class="attr">method</span>: <span class="string">&#x27;post&#x27;</span>,</span><br><span class="line">  <span class="attr">data</span>: &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;litong&#x27;</span>,</span><br><span class="line">    age : <span class="number">25</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">transformRequest</span>: [<span class="keyword">function</span> (<span class="params">data</span>) &#123;</span><br><span class="line">    data = <span class="title class_">Qs</span>.<span class="title function_">stringify</span>(data);</span><br><span class="line">    <span class="keyword">return</span> data;</span><br><span class="line">  &#125;],</span><br><span class="line">  <span class="attr">headers</span>:&#123;<span class="string">&#x27;Content-Type&#x27;</span>:<span class="string">&#x27;application/x-www-form-urlencoded&#x27;</span>&#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2.4 POST JSON请求，默认就是application/json请求:</span></span><br><span class="line"><span class="keyword">var</span> url =  <span class="string">&#x27;http://localhost:9999/api/v2/doJsonPost&#x27;</span></span><br><span class="line">axios.<span class="title function_">post</span>(url, &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;react.js&#x27;</span>,</span><br><span class="line">  <span class="attr">lastName</span>: <span class="string">&#x27;Flintstone&#x27;</span></span><br><span class="line">&#125;)</span><br><span class="line">.<span class="title function_">then</span>(<span class="keyword">function</span> (<span class="params">response</span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(response.<span class="property">data</span>);  <span class="comment">// &#123;name: &quot;react.js&quot;, lastName: &quot;Flintstone&quot;, msg: &quot;我是JSON提交&quot;&#125;</span></span><br><span class="line">&#125;)</span><br><span class="line">.<span class="title function_">catch</span>(<span class="keyword">function</span> (<span class="params">error</span>) &#123;</span><br><span class="line">   <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;Http Request Error, url is &#x27;</span> + url);</span><br><span class="line">&#125;);</span><br><span class="line"><span class="comment">// 3. DELETE请求和GET请求类似，此处不做演示</span></span><br><span class="line"><span class="comment">// 4. PUT请求和POST请求类似，此处不做演示</span></span><br></pre></td></tr></table></figure>

<h3 id="15-3-3-axios全局配置"><a href="#15-3-3-axios全局配置" class="headerlink" title="15.3.3 axios全局配置"></a>15.3.3 axios全局配置</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 配置公共的请求头 </span></span><br><span class="line">axios.<span class="property">defaults</span>.<span class="property">baseURL</span> = <span class="string">&#x27;http://localhost:9999/api/v2&#x27;</span>;</span><br><span class="line"><span class="comment">//  配置 超时时间</span></span><br><span class="line">axios.<span class="property">defaults</span>.<span class="property">timeout</span> = <span class="number">2500</span>;</span><br><span class="line"><span class="comment">//  配置公共的请求头</span></span><br><span class="line">axios.<span class="property">defaults</span>.<span class="property">headers</span>.<span class="property">common</span>[<span class="string">&#x27;Authorization&#x27;</span>] = <span class="variable constant_">AUTH_TOKEN</span>;</span><br><span class="line"><span class="comment">// 配置公共的 post 的 Content-Type</span></span><br><span class="line">axios.<span class="property">defaults</span>.<span class="property">headers</span>.<span class="property">post</span>[<span class="string">&#x27;Content-Type&#x27;</span>] = <span class="string">&#x27;application/x-www-form-urlencoded&#x27;</span>;</span><br></pre></td></tr></table></figure>

<h3 id="15-3-4-axios拦截器"><a href="#15-3-4-axios拦截器" class="headerlink" title="15.3.4 axios拦截器"></a>15.3.4 axios拦截器</h3><ul>
<li>请求拦截器<ul>
<li>请求拦截器的作用是在请求发送前进行一些操作<ul>
<li>例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易</li>
</ul>
</li>
</ul>
</li>
<li>响应拦截器<ul>
<li>响应拦截器的作用是在接收到响应后进行一些操作<ul>
<li>例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页</li>
</ul>
</li>
</ul>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1. 请求拦截器 </span></span><br><span class="line">axios.<span class="property">interceptors</span>.<span class="property">request</span>.<span class="title function_">use</span>(<span class="keyword">function</span>(<span class="params">config</span>) &#123;    </span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(config.<span class="property">url</span>)</span><br><span class="line">    <span class="comment">// 1.1  任何请求都会经过这一步   在发送请求之前做些什么   </span></span><br><span class="line">    config.<span class="property">headers</span>.<span class="property">mytoken</span> = <span class="string">&#x27;nihao&#x27;</span>;</span><br><span class="line">    <span class="comment">// 1.2  这里一定要return   否则配置不成功  </span></span><br><span class="line">    <span class="keyword">return</span> config;</span><br><span class="line">&#125;, <span class="keyword">function</span>(<span class="params">err</span>)&#123;</span><br><span class="line">    <span class="comment">// 1.3 对请求错误做点什么    </span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(err)</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">// 2. 响应拦截器 </span></span><br><span class="line">axios.<span class="property">interceptors</span>.<span class="property">response</span>.<span class="title function_">use</span>(<span class="keyword">function</span>(<span class="params">res</span>) &#123;</span><br><span class="line">    <span class="comment">// 2.1  在接收响应做些什么  </span></span><br><span class="line">    <span class="keyword">var</span> data = res.<span class="property">data</span>;</span><br><span class="line">    <span class="keyword">return</span> data;</span><br><span class="line">&#125;, <span class="keyword">function</span>(<span class="params">err</span>)&#123;</span><br><span class="line">    <span class="comment">// 2.2 对响应错误做点什么  </span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(err)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h2 id="15-3-fetch"><a href="#15-3-fetch" class="headerlink" title="15.3 fetch"></a>15.3 fetch</h2><p>github简介:</p>
<blockquote>
<p>fetch()函数是一种基于Promise的机制，用于在浏览器中以编程方式发出Web请求。这个项目是一个polyfill，它实现了标准Fetch规范的子集，足以使fetch成为传统Web应用程序中XMLHttpRequest的大多数用法的可行替代品。</p>
</blockquote>
<ul>
<li>Fetch API是新的ajax解决方案 Fetch会返回Promise</li>
<li><strong>fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象</strong>。</li>
<li>支持fetch(url, options).then()的Promise语法，</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> url = <span class="string">&#x27;http://localhost:9999/api/v2/sayHello&#x27;</span></span><br><span class="line"><span class="comment">// 1.发送GET请求</span></span><br><span class="line"><span class="comment">// 1.1 GET无参请求</span></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">	Fetch API 基本用法</span></span><br><span class="line"><span class="comment">	fetch(url).then()</span></span><br><span class="line"><span class="comment">	第一个参数请求的路Fetch会返回Promise   所以我们可以使用then 拿到请求成功的结果 </span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="title function_">fetch</span>(url).<span class="title function_">then</span>(<span class="keyword">function</span>(<span class="params">data</span>)&#123;</span><br><span class="line">  <span class="comment">// text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于获取后台返回的数据</span></span><br><span class="line">  <span class="keyword">return</span> data.<span class="title function_">json</span>(); <span class="comment">// &#123;&quot;msg&quot;:&quot;Hello! 无名! Welcome Study JavaScript!&quot;&#125;</span></span><br><span class="line">&#125;).<span class="title function_">then</span>(<span class="keyword">function</span>(<span class="params">data</span>)&#123;</span><br><span class="line">  <span class="comment">//   在这个then里面我们能拿到最终的数据  </span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(data)</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 1.2 GET有参请求: 参数追加</span></span><br><span class="line">url += <span class="string">&#x27;?name=李彤&#x27;</span></span><br><span class="line"><span class="title function_">fetch</span>(url, &#123;</span><br><span class="line">  <span class="attr">method</span>: <span class="string">&#x27;get&#x27;</span> <span class="comment">// 默认是GET请求</span></span><br><span class="line">&#125;).<span class="title function_">then</span>(<span class="keyword">function</span> (<span class="params">data</span>) &#123;</span><br><span class="line">   <span class="keyword">return</span> data.<span class="title function_">json</span>();</span><br><span class="line">&#125;).<span class="title function_">then</span>(<span class="keyword">function</span> (<span class="params">data</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(data) <span class="comment">// &#123;msg: &quot;Hello! 李彤! Welcome Study JavaScript!&quot;&#125;</span></span><br><span class="line">&#125;);</span><br><span class="line"><span class="comment">// 2. POST表单请求</span></span><br><span class="line"><span class="keyword">var</span> url = <span class="string">&#x27;http://localhost:9999/api/v2/doFormPost&#x27;</span>;</span><br><span class="line"><span class="title function_">fetch</span>(url, &#123;</span><br><span class="line">  <span class="attr">method</span>: <span class="string">&#x27;post&#x27;</span>,</span><br><span class="line">  <span class="attr">body</span>: <span class="string">&#x27;name=vue&amp;age=25&#x27;</span>,</span><br><span class="line">  <span class="attr">headers</span>: &#123;</span><br><span class="line">      <span class="string">&#x27;Content-Type&#x27;</span>: <span class="string">&#x27;application/x-www-form-urlencoded&#x27;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line">.<span class="title function_">then</span>(<span class="keyword">function</span>(<span class="params">data</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> data.<span class="title function_">json</span>();</span><br><span class="line">&#125;).<span class="title function_">then</span>(<span class="keyword">function</span>(<span class="params">data</span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(data) <span class="comment">// &#123;&quot;msg&quot;:&quot;我表单提交&quot;,&quot;name&quot;:&quot;vue&quot;&#125;</span></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 3 POST JSON请求</span></span><br><span class="line"><span class="keyword">var</span> url = <span class="string">&#x27;http://localhost:9999/api/v2/doJsonPost&#x27;</span>;</span><br><span class="line"><span class="title function_">fetch</span>(url, &#123;</span><br><span class="line">  <span class="attr">method</span>: <span class="string">&#x27;post&#x27;</span>,</span><br><span class="line">  <span class="attr">body</span>: <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(&#123;</span><br><span class="line">      <span class="attr">name</span>: <span class="string">&#x27;张三&#x27;</span>,</span><br><span class="line">      <span class="attr">pwd</span>: <span class="string">&#x27;456&#x27;</span></span><br><span class="line">  &#125;),</span><br><span class="line">  <span class="attr">headers</span>: &#123;</span><br><span class="line">      <span class="string">&#x27;Content-Type&#x27;</span>: <span class="string">&#x27;application/json&#x27;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line">.<span class="title function_">then</span>(<span class="keyword">function</span>(<span class="params">data</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> data.<span class="title function_">text</span>();</span><br><span class="line">&#125;).<span class="title function_">then</span>(<span class="keyword">function</span>(<span class="params">data</span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(data); <span class="comment">// &#123;&quot;name&quot;:&quot;张三&quot;,&quot;pwd&quot;:&quot;456&quot;,&quot;msg&quot;:&quot;我是JSON提交&quot;&#125;</span></span><br><span class="line">&#125;);</span><br><span class="line"><span class="comment">// 4. DELETE请求和GET请求类似，此处不做演示</span></span><br><span class="line"><span class="comment">// 5. PUT请求和POST请求类似，此处不做演示</span></span><br></pre></td></tr></table></figure>



<h2 id="15-4-vue-resource"><a href="#15-4-vue-resource" class="headerlink" title="15.4 vue-resource"></a>15.4 vue-resource</h2><p>vue-resource是vue 1.0官方推荐的http请求库，本来还想学习一下，但是随手翻到的资料写到：Vue 要实现异步加载需要使用到 vue-resource 库，Vue.js 2.0版本推荐使用 <a target="_blank" rel="noopener" href="https://www.runoob.com/vue2/vuejs-ajax-axios.html">axios</a> 来完成 ajax 请求，突然一下没有学习的欲望。如果读者想学习，请移步<a target="_blank" rel="noopener" href="https://github.com/pagekit/vue-resource">这里</a>进行学习。</p>
<h1 id="16-参考文档"><a href="#16-参考文档" class="headerlink" title="16. 参考文档"></a>16. 参考文档</h1><ol>
<li><a target="_blank" rel="noopener" href="https://v1-cn.vuejs.org/">vue.js 1.x 文档</a></li>
<li><a target="_blank" rel="noopener" href="https://cn.vuejs.org/">vue.js 2.x 文档</a></li>
<li><a target="_blank" rel="noopener" href="http://www.css88.com/archives/7715">String.prototype.padStart(maxLength, fillString)</a></li>
<li><a target="_blank" rel="noopener" href="http://www.cnblogs.com/wuhua1/p/6686237.html">js 里面的键盘事件对应的键码</a></li>
<li><a target="_blank" rel="noopener" href="http://www.cnblogs.com/kidney/p/6052935.html">Vue.js双向绑定的实现原理</a></li>
<li><a target="_blank" rel="noopener" href="https://github.com/axios/axios">axios主页</a></li>
<li><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API">fetch文档</a></li>
<li><a target="_blank" rel="noopener" href="https://cn.vuejs.org/v2/guide/comparison.html">流行框架对比</a></li>
<li><a target="_blank" rel="noopener" href="http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html">MVC、MVP和MVVM模式演变</a></li>
</ol>
</section>
    <!-- Tags START -->
    
      <div class="tags">
        <span>Tags:</span>
        
  <a href="/tags#Vue" >
    <span class="tag-code">Vue</span>
  </a>

      </div>
    
    <!-- Tags END -->
    <!-- NAV START -->
    
  <div class="nav-container">
    <!-- reverse left and right to put prev and next in a more logic postition -->
    
      <a class="nav-left" href="/2020/01/01/Adobe%20Premiere%E8%A7%86%E9%A2%91%E5%89%AA%E8%BE%91%E5%BF%85%E5%A4%87%E5%BF%AB%E6%8D%B7%E9%94%AE/">
        <span class="nav-arrow">← </span>
        
          Adobe Premiere视频剪辑必备快捷键
        
      </a>
    
    
      <a class="nav-right" href="/2020/02/03/Vue%E6%96%B0%E6%89%8B%E8%BF%9B%E9%98%B6%E6%8C%87%E5%8D%97/">
        
          Vue新手进阶指南
        
        <span class="nav-arrow"> →</span>
      </a>
    
  </div>

    <!-- NAV END -->
    <!-- 打赏 START -->
    
      <div class="money-like">
        <div class="reward-btn">
          赏
          <span class="money-code">
            <span class="alipay-code">
              <div class="code-image"></div>
              <b>使用支付宝打赏</b>
            </span>
            <span class="wechat-code">
              <div class="code-image"></div>
              <b>使用微信打赏</b>
            </span>
          </span>
        </div>
        <p class="notice">若你觉得我的文章对你有帮助，欢迎点击上方按钮对我打赏</p>
      </div>
    
    <!-- 打赏 END -->
    <!-- 二维码 START -->
    
      <div class="qrcode">
        <canvas id="share-qrcode"></canvas>
        <p class="notice">扫描二维码，分享此文章</p>
      </div>
    
    <!-- 二维码 END -->
    
      <!-- Utterances START -->
      <div id="utterances"></div>
      <script src="https://utteranc.es/client.js"
        repo="ltyeamin/blogtalks"
        issue-term="pathname"
        theme="github-light"
        crossorigin="anonymous"
        async></script>    
      <!-- Utterances END -->
    
  </article>
  <!-- Article END -->
  <!-- Catalog START -->
  
    <aside class="catalog-container">
  <div class="toc-main">
    <strong class="toc-title">Catalog</strong>
    
      <ol class="toc-nav"><li class="toc-nav-item toc-nav-level-1"><a class="toc-nav-link" href="#1-%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E5%AD%A6%E4%B9%A0%E6%B5%81%E8%A1%8C%E6%A1%86%E6%9E%B6"><span class="toc-nav-text">1. 为什么要学习流行框架</span></a></li><li class="toc-nav-item toc-nav-level-1"><a class="toc-nav-link" href="#2-%E6%A1%86%E6%9E%B6%E5%92%8C%E5%BA%93%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-nav-text">2. 框架和库的区别</span></a></li><li class="toc-nav-item toc-nav-level-1"><a class="toc-nav-link" href="#3-%E5%BC%80%E5%8F%91%E6%A8%A1%E5%BC%8F%E7%9A%84%E6%BC%94%E5%8F%98"><span class="toc-nav-text">3. 开发模式的演变</span></a></li><li class="toc-nav-item toc-nav-level-1"><a class="toc-nav-link" href="#4-%E6%B5%81%E8%A1%8C%E6%A1%86%E6%9E%B6%E5%AF%B9%E6%AF%94"><span class="toc-nav-text">4. 流行框架对比</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#4-1-Angular"><span class="toc-nav-text">4.1 Angular</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#4-2-React"><span class="toc-nav-text">4.2 React</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#4-3-Vue"><span class="toc-nav-text">4.3 Vue</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-1"><a class="toc-nav-link" href="#5-Vue-js%E5%9F%BA%E7%A1%80%E5%AD%A6%E4%B9%A0"><span class="toc-nav-text">5. Vue.js基础学习</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#5-1-Vue-js%E6%98%AF%E4%BB%80%E4%B9%88"><span class="toc-nav-text">5.1 Vue.js是什么</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#5-2-%E6%8F%92%E5%80%BC%E8%A1%A8%E8%BE%BE%E5%BC%8F%E5%92%8Cv-cloak"><span class="toc-nav-text">5.2 插值表达式和v-cloak</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#5-2-1-%E6%8F%92%E5%80%BC%E8%A1%A8%E8%BE%BE%E5%BC%8F"><span class="toc-nav-text">5.2.1 插值表达式</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#5-2-2-v-cloak%E5%92%8Cv-text%E6%8C%87%E4%BB%A4"><span class="toc-nav-text">5.2.2  v-cloak和v-text指令</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#5-3-Vue%E6%8C%87%E4%BB%A4%E4%B9%8Bv-html"><span class="toc-nav-text">5.3 Vue指令之v-html</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#5-4-Vue%E6%8C%87%E4%BB%A4%E4%B9%8Bv-bind%E5%92%8Cv-on"><span class="toc-nav-text">5.4 Vue指令之v-bind和v-on</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#5-5-Vue%E6%8C%87%E4%BB%A4%E4%B9%8Bv-pre%E5%92%8Cv-once"><span class="toc-nav-text">5.5 Vue指令之v-pre和v-once</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#5-5-1-v-pre%E6%8C%87%E4%BB%A4"><span class="toc-nav-text">5.5.1 v-pre指令</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#5-5-3-v-once%E6%8C%87%E4%BB%A4"><span class="toc-nav-text">5.5.3 v-once指令</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#5-6-%E8%B7%91%E9%A9%AC%E7%81%AF%E6%95%88%E6%9E%9C%E7%BB%83%E4%B9%A0"><span class="toc-nav-text">5.6 跑马灯效果练习</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link"><span class="toc-nav-text"></span></a></li></ol></li><li class="toc-nav-item toc-nav-level-1"><a class="toc-nav-link" href="#6-Vue%E6%8C%87%E4%BB%A4%E4%B9%8B%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6"><span class="toc-nav-text">6. Vue指令之事件修饰符</span></a></li><li class="toc-nav-item toc-nav-level-1"><a class="toc-nav-link" href="#7-Vue%E6%8C%87%E4%BB%A4%E4%B9%8Bv-model%E5%92%8C%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A"><span class="toc-nav-text">7. Vue指令之v-model和双向数据绑定</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#7-1-%E7%AE%80%E6%98%93%E8%AE%A1%E7%AE%97%E5%99%A8%E6%A1%88%E4%BE%8B"><span class="toc-nav-text">7.1 简易计算器案例</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-1"><a class="toc-nav-link" href="#8-%E5%9C%A8Vue%E4%B8%AD%E4%BD%BF%E7%94%A8%E6%A0%B7%E5%BC%8F"><span class="toc-nav-text">8. 在Vue中使用样式</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#8-1-%E4%BD%BF%E7%94%A8class%E6%A0%B7%E5%BC%8F"><span class="toc-nav-text">8.1 使用class样式</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#8-2-%E4%BD%BF%E7%94%A8%E5%86%85%E8%81%94%E6%A0%B7%E5%BC%8F"><span class="toc-nav-text">8.2 使用内联样式</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#8-3-%E6%A0%B7%E5%BC%8F%E7%BB%BC%E5%90%88%E7%BB%83%E4%B9%A0"><span class="toc-nav-text">8.3 样式综合练习</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-1"><a class="toc-nav-link" href="#9-Vue%E6%8C%87%E4%BB%A4%E4%B9%8Bv-for%E5%92%8Ckey%E5%B1%9E%E6%80%A7"><span class="toc-nav-text">9. Vue指令之v-for和key属性</span></a></li><li class="toc-nav-item toc-nav-level-1"><a class="toc-nav-link" href="#10-Vue%E6%8C%87%E4%BB%A4%E4%B9%8Bv-if%E5%92%8Cv-show"><span class="toc-nav-text">10. Vue指令之v-if和v-show</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#10-1-%E6%A0%B9%E6%8D%AE%E6%9D%A1%E4%BB%B6%E7%AD%9B%E9%80%89%E6%95%B0%E6%8D%AE"><span class="toc-nav-text">10.1 根据条件筛选数据</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-1"><a class="toc-nav-link" href="#11-%E8%BF%87%E6%BB%A4%E5%99%A8"><span class="toc-nav-text">11. 过滤器</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#11-1-%E7%A7%81%E6%9C%89%E8%BF%87%E6%BB%A4%E5%99%A8"><span class="toc-nav-text">11.1 私有过滤器</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#11-2-%E5%85%A8%E5%B1%80%E8%BF%87%E6%BB%A4%E5%99%A8"><span class="toc-nav-text">11.2 全局过滤器</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-1"><a class="toc-nav-link" href="#12-%E9%94%AE%E7%9B%98%E4%BF%AE%E9%A5%B0%E7%AC%A6%E4%BB%A5%E5%8F%8A%E8%87%AA%E5%AE%9A%E4%B9%89%E9%94%AE%E7%9B%98%E4%BF%AE%E9%A5%B0%E7%AC%A6"><span class="toc-nav-text">12. 键盘修饰符以及自定义键盘修饰符</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#12-1-1-x%E4%B8%AD%E8%87%AA%E5%AE%9A%E4%B9%89%E9%94%AE%E7%9B%98%E4%BF%AE%E9%A5%B0%E7%AC%A6%E3%80%90%E4%BA%86%E8%A7%A3%E5%8D%B3%E5%8F%AF%E3%80%91"><span class="toc-nav-text">12.1 1.x中自定义键盘修饰符【了解即可】</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#12-2-2-x%E4%B8%AD%E8%87%AA%E5%AE%9A%E4%B9%89%E9%94%AE%E7%9B%98%E4%BF%AE%E9%A5%B0%E7%AC%A6"><span class="toc-nav-text">12.2 2.x中自定义键盘修饰符</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-1"><a class="toc-nav-link" href="#13-%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4"><span class="toc-nav-text">13. 自定义指令</span></a></li><li class="toc-nav-item toc-nav-level-1"><a class="toc-nav-link" href="#14-Vue%E8%B0%83%E8%AF%95%E5%B7%A5%E5%85%B7vue-devtools%E7%9A%84%E5%AE%89%E8%A3%85%E6%AD%A5%E9%AA%A4%E5%92%8C%E4%BD%BF%E7%94%A8"><span class="toc-nav-text">14. Vue调试工具vue-devtools的安装步骤和使用</span></a></li><li class="toc-nav-item toc-nav-level-1"><a class="toc-nav-link" href="#15-HTTP%E8%AF%B7%E6%B1%82%E7%B1%BB%E5%BA%93"><span class="toc-nav-text">15. HTTP请求类库</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#15-1-XMLHttpRequests-%E5%8E%9F%E7%94%9FAjax"><span class="toc-nav-text">15.1 XMLHttpRequests 原生Ajax</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#15-2-JQuery-Ajax"><span class="toc-nav-text">15.2 JQuery Ajax</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#15-3-axios"><span class="toc-nav-text">15.3  axios</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#15-3-1-axios%E7%89%B9%E6%80%A7"><span class="toc-nav-text">15.3.1 axios特性</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#15-3-2-%E8%AF%B7%E6%B1%82%E7%A4%BA%E4%BE%8B"><span class="toc-nav-text">15.3.2 请求示例</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#15-3-3-axios%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE"><span class="toc-nav-text">15.3.3 axios全局配置</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#15-3-4-axios%E6%8B%A6%E6%88%AA%E5%99%A8"><span class="toc-nav-text">15.3.4 axios拦截器</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#15-3-fetch"><span class="toc-nav-text">15.3 fetch</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#15-4-vue-resource"><span class="toc-nav-text">15.4 vue-resource</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-1"><a class="toc-nav-link" href="#16-%E5%8F%82%E8%80%83%E6%96%87%E6%A1%A3"><span class="toc-nav-text">16. 参考文档</span></a></li></ol>
    
  </div>
</aside>
  
  <!-- Catalog END -->
</main>

<script>
  (function () {
    var url = 'http://example.com/2020/02/02/Vue新手入门指南/';
    var banner = ''
    if (banner !== '' && banner !== 'undefined' && banner !== 'null') {
      $('#article-banner').css({
        'background-image': 'url(' + banner + ')'
      })
    } else {
      $('#article-banner').geopattern(url)
    }
    $('.header').removeClass('fixed-header')

    // error image
    $(".markdown-content img").on('error', function() {
      $(this).attr('src', '/css/images/error_icon.png')
      $(this).css({
        'cursor': 'default'
      })
    })

    // zoom image
    $(".markdown-content img").on('click', function() {
      var src = $(this).attr('src')
      if (src !== '/css/images/error_icon.png') {
        var imageW = $(this).width()
        var imageH = $(this).height()

        var zoom = ($(window).width() * 0.95 / imageW).toFixed(2)
        zoom = zoom < 1 ? 1 : zoom
        zoom = zoom > 2 ? 2 : zoom
        var transY = (($(window).height() - imageH) / 2).toFixed(2)

        $('body').append('<div class="image-view-wrap"><div class="image-view-inner"><img src="'+ src +'" /></div></div>')
        $('.image-view-wrap').addClass('wrap-active')
        $('.image-view-wrap img').css({
          'width': `${imageW}`,
          'transform': `translate3d(0, ${transY}px, 0) scale3d(${zoom}, ${zoom}, 1)`
        })
        $('html').css('overflow', 'hidden')

        $('.image-view-wrap').on('click', function() {
          $(this).remove()
          $('html').attr('style', '')
        })
      }
    })
  })();
</script>


  <script>
    var qr = new QRious({
      element: document.getElementById('share-qrcode'),
      value: document.location.href
    });
  </script>






    <div class="scroll-top">
  <span class="arrow-icon"></span>
</div>
    <footer class="app-footer">
  <p class="copyright">
    &copy; 2024 | Proudly powered by <a href="https://hexo.io" target="_blank">Hexo</a>
    <br>
    Theme by <a target="_blank" rel="noopener" href="https://github.com/ltyeamin">tong.li</a>
  </p>
</footer>

<script>
  function async(u, c) {
    var d = document, t = 'script',
      o = d.createElement(t),
      s = d.getElementsByTagName(t)[0];
    o.src = u;
    if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); }
    s.parentNode.insertBefore(o, s);
  }
</script>
<script>
  async("https://cdn.staticfile.org/fastclick/1.0.6/fastclick.min.js", function(){
    FastClick.attach(document.body);
  })
</script>

<script>
  var hasLine = 'true';
  async("https://cdn.staticfile.org/highlight.js/9.12.0/highlight.min.js", function(){
    $('figure pre').each(function(i, block) {
      var figure = $(this).parents('figure');
      if (hasLine === 'false') {
        figure.find('.gutter').hide();
      }
      hljs.configure({useBR: true});
      var lang = figure.attr('class').split(' ')[1] || 'code';
      var codeHtml = $(this).html();
      var codeTag = document.createElement('code');
      codeTag.className = lang;
      codeTag.innerHTML = codeHtml;
      $(this).attr('class', '').empty().html(codeTag);
      figure.attr('data-lang', lang.toUpperCase());
      hljs.highlightBlock(block);
    });
  })
</script>
<!-- Baidu Tongji -->



<script src='https://cdn.staticfile.org/mermaid/8.11.2/mermaid.min.js'></script>



<script src="/js/script.js"></script>


  </body>
</html>